import {
  createRouter,
  createWebHashHistory,
  Router,
  RouteRecordRaw,
} from 'vue-router'
import LoginVue from '../views/login/index.vue'
import { userInfoAPI } from '@/http/api'
import { useUserStore } from '@/store/user'
import { ElMessage } from 'element-plus'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/login',
    component: LoginVue,
  },
  {
    path: '/',
    component: () => import('@/views/home/index.vue'),
    children: [
      {
        path: 'index',
        component: () => import('@/views/main/index.vue'),
      }
    ]
  },
]

const router: Router = createRouter({
  routes, //路由表
  history: createWebHashHistory(), //hash路由
})

// 对每个页面都需要进行权限的验证
router.beforeEach((to, from, next) => {
  const userStore = useUserStore(); //取出pinia
  const token = localStorage.getItem("token");
  // 有数据 / token 发起请求 动态获取菜单数据, 没有就跳到else
  if (userStore.menus.length === 0 && token) {
    // 把请求成功后的菜单数据存在pinia
    userInfoAPI().then(res => {
      if (res.code === 200) {
        userStore.menus = res.data.menus; //将请求到的菜单信息存到 pinia
        userStore.username = res.data.username; //将请求到的用户名存到 pinia
        // 生成当前这个用户能访问的路由
        // 现在当前用户能访问的所有的路由在 pinia 里面
        userStore.routes.forEach(item => {
          // 动态添加路由
          router.addRoute({
            path: '/' + item.name, //动态数据
            name: item.name,
            component: () => import('@/views/home/index.vue'),
            // 过滤二级 添加组件
            children: item.children?.map(sub => (
              {
                path: sub.name,
                name: sub.name,
                component: () => import(`../views/${item.name}/${sub.name}.vue`)
              }
            )),
          });
        });
        // 动态添加路由是异步的请求, 同步执行完路由还没有添加好, 所以就会产生白屏的原因
        next(to.fullPath);
      };
    });
  }
  // 限制其登录访问权限, 如果没有登录 没有token 并且 当前不在登录页
  else if (!token && to.path !== '/login') {
    ElMessage.warning("登录失效，请重新登录")
    next('/login'); // 跳转回登录页
  }
  // 如果用户已经登录 并且 有用户信息 并且 用户执意要去登录页
  else if (token && userStore.menus.length !== 0 && to.path === "/login") {
    next(from.fullPath); //循环跳回当前页面
  }
  else {
    next(); //执行进入这个路由
  }


});

export default router